<template>
  <div>
    <div class="wHeader-area">
      <div class="wHeader-block">
        <!-- 导航折叠按钮 -->
        <div class="wHeader-navBtn" @click="collapseChage">
          <i v-if="!collapse" class="el-icon-s-fold"></i>
          <i v-else class="el-icon-s-unfold"></i>
        </div>
        <!-- logo标志 -->
        <div class="wHeader-logo">后台管理系统</div>
      </div>
      <div class="wHeader-block">
        <!-- 消息通知 -->
        <el-tooltip
          effect="dark"
          :content="message ? `有${message}条未读消息` : `消息中心`"
          placement="bottom"
        >
          <router-link class="wHeader-notice" to="notfound" draggable="false">
            <el-badge is-dot :hidden="!message">
              <i class="el-icon-bell"></i>
            </el-badge>
          </router-link>
        </el-tooltip>
        <!-- 用户头像 -->
        <div class="wHeader-userImgHPBox">
          <img
            class="wHeader-userImgHP"
            src="@/assets/img/hpimg001.jpg"
            alt="用户头像"
            draggable="false"
          />
        </div>
        <!-- 用户名下拉菜单 -->
        <el-dropdown class="wHeader-userName" trigger="click">
          <span class="el-dropdown-link"
            >{{ username }}<i class="el-icon-caret-bottom"></i
          ></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // collapse: false, // 导航折叠按钮是否打开，true-打开，false-关闭
      message: 2, // 新消息个数

      name: "管理员", // 用户昵称
    };
  },
  computed: {
    username() {
      let username = `admin`;
      return username ? username : this.name;
    },
    // 监听侧边栏是否关闭
    collapse() {
      return this.$store.state.sidebar;
    },
  },
  methods: {
    // 侧边栏折叠
    collapseChage() {
      this.$store.commit("sidebar");
    },
  },
  mounted() {
    if (document.body.clientWidth < 1500) {
      this.collapseChage();
    }
  },
};
</script>

<style lang="less">
@import "~@/assets/css/publicStyle.less";
// 公共头部
.wHeader-area {
  position: fixed;
  width: 100%;
  height: @wHeight_header;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: @wColorBG_header;
  display: flex;
  justify-content: space-between;
  user-select: none;

  .wHeader-block {
    flex: none;
    display: flex;
    align-items: center;

    // 导航折叠按钮
    .wHeader-navBtn {
      flex: none;
      line-height: @wHeight_header;
      padding: 0 21px;
      font-size: @wFontSize + 8px;
      color: #ffffff;
      box-sizing: border-box;
      cursor: pointer;

      &:hover {
        background-color: rgba(255, 255, 255, 0.05);
      }
    }

    // logo标志
    .wHeader-logo {
      flex: none;
      height: @wHeight_header;
      line-height: @wHeight_header;
      font-size: @wFontSize + 8px;
      color: #fff;
    }

    // 消息通知
    .wHeader-notice {
      flex: none;
      width: 30px;
      height: 30px;
      line-height: 30px;
      font-size: @wFontSize + 8px;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 15px;
    }

    // 用户头像
    .wHeader-userImgHPBox {
      flex: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;

      .wHeader-userImgHP {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    // 用户名下拉菜单
    .wHeader-userName {
      flex: none;
      height: 40px;
      line-height: 40px;
      font-size: @wFontSize + 2px;
      color: #fff;
      cursor: pointer;
      margin-right: 50px;
    }
  }
}
</style>
